<template>
    <div class="e-form searchDialog" style="padding-top: 20px">
        <div class="form">
            <el-form label-width="150px" :model="searchForm" :rules="rules">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="结算日期：" prop="beginPlanDate">
                            <div style="display: flex; width: 100%">
                                <el-date-picker
                                    v-model="searchForm.beginPlanDate"
                                    value-format="yyyy-MM-dd"
                                    style="flex: 1"
                                    :picker-options="limitTimeStart"
                                >
                                </el-date-picker>
                                <span class="separate">—</span>
                                <el-date-picker
                                    arrow-control
                                    v-model="searchForm.endPlanDate"
                                    value-format="yyyy-MM-dd"
                                    style="flex: 1"
                                    :picker-options="limitTimeEnd"
                                ></el-date-picker>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="机构：" prop="orgId">
                            <el-input
                                v-model="searchForm.orgName"
                                placeholder="请输入内容"
                            >
                                <i
                                    slot="suffix"
                                    class="el-input__icon el-icon-document-copy"
                                    @click="onSelectOrg"
                                ></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item
                            label="结算单位："
                            prop="settlementUnitId"
                        >
                            <el-input
                                v-model="searchForm.settlementUnitName"
                                placeholder="请输入内容"
                            >
                                <i
                                    slot="suffix"
                                    class="el-input__icon el-icon-document-copy"
                                    @click="onSelectSettlementUnitId"
                                ></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="合同类型：" prop="contractType">
                            <check-all
                                :chackdData="ctClassify.contractType"
                                @checkdData="onSelectedContractType"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="状态：" prop="state">
                            <CheckAll
                                :chackdData.sync="stateList"
                                @checkdData="selectState"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div style="display: none">{{ localSearchData }}</div>
    </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
// eslint-disable-next-line no-unused-vars
import { selectDataClient, openAppClient } from '@/utils/common'
import CheckAll from '@/components/common/checkAll'
export default {
    components: {
        CheckAll
    },
    data () {
        return {
            searchForm: {
                beginPlanDate: '',
                contractType: [],
                endPlanDate: '',
                keyword: '',
                limit: 20,
                orgId: '',
                orgName: '',
                page: 1,
                settlementUnitId: '',
                settlementUnitName: '',
                states: []
            },
            // rules: {
            //     orgId: [
            //         { required: true, message: '请选择机构', trigger: ['blur', 'change'] },
            //     ],
            //     settlementUnitId: [
            //         { required: true, message: '请选择结算单位', trigger: ['blur', 'change'] },
            //     ],
            //     contractType: [
            //         { required: true, message: '请选择合同类型', trigger: ['blur', 'change'] },
            //     ],
            //     state: [
            //         { required: true, message: '请选择状态', trigger: ['blur', 'change'] },
            //     ],
            // },

            stateList: [
                { value: 0, label: '草稿' },
                { value: 1, label: '审核中' },
                { value: 2, label: '已审核' },
                { value: 5, label: '已作废' },
                { value: 9, label: '共享审核中' },
                { value: 10, label: '共享驳回' }
            ],
            jsdwData: {
                businessUnitTypes: [],
                keyword: '',
                limit: 10,
                orgId: '',
                outerTypes: [],
                page: 1,
                states: [],
                type: [0, 1, 2],
                supplierTypes: [],
                subcontractorTypes: [],
                businessTypes: [],
                factoOutSourcerType: []
            },
            limitTimeStart: {
                disabledDate: this._limitTimeStart
            },
            limitTimeEnd: {
                disabledDate: this._limitTimeEnd
            },
        }
    },
    watch: {
        searchForm: {
            handler (newVal) {
                this.setSearchData({ equipSearchData: newVal })
            },
            deep: true
        }
    },
    computed: {
        ...mapState('settlementManagement', ['ysState']),
        ...mapState('contract', ['ctClassify']),
        localSearchData () {
            // 默认设置搜索标志为false，则不进行搜索回调
            const searchForm = this.searchForm
            searchForm.searching = false
            this.setSearchData(searchForm)
            return searchForm
        }
    },
    methods: {
        ...mapMutations(['setSearchData', 'setSelectedInfo']),
        onSelectOrg () {
            selectDataClient({
                SelectServiceToken: '/hr/org/getChildrenOrg', // 客户端对应方法名
                IsSingleMode: true, // 是否单选 true 单选 false 多选
                SelectedIDs: [], // 已选中id(注意：是上一次已选中的id，不是要传的参数，如果第一次选，则传[])
                InitParamsStr: '', // 接口参数(name为模拟参数)
                Title: '选择机构' // 标题
            }).then(val => {
                this.searchForm.orgId = val[0].orgId
                this.searchForm.orgName = val[0].orgName
            })
        },
        onSelectSettlementUnitId () {
            selectDataClient({
                SelectServiceToken: 'GeneralSelectOuter', // 客户端对应方法名
                IsSingleMode: true, // 是否单选 true 单选 false 多选
                SelectedIDs: [], // 已选中id(注意：是上一次已选中的id，不是要传的参数，如果第一次选，则传[])
                InitParamsStr: JSON.stringify(this.jsdwData), // 接口参数(name为模拟参数)
                Title: '选择结算单位' // 标题
            }).then(val => {
                this.searchForm.settlementUnitId = val[0].id
                this.searchForm.settlementUnitName = val[0].outerName
            })
        },
        onSelectedContractType (data) {
            this.searchForm.contractType = data
        },
        selectState (data) {
            this.searchForm.states = data
        },
        // 日期选择后,禁用不可选的日期
        _limitTimeStart (time) {
            if (this.searchForm.endPlanDate) {
                return (
                    time.getTime() > new Date(this.searchForm.endPlanDate).getTime()
                )
            } else {
                return time.getTime() < 0
            }
        },
        _limitTimeEnd (time) {
            if (this.searchForm.beginPlanDate) {
                return (
                    time.getTime() <
                    new Date(this.searchForm.beginPlanDate).getTime() - 8.64e7
                )
            } else {
                return time.getTime() < 0
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.searchDialog {
    ::v-deep.el-input--suffix {
        i {
            display: flex;
            align-items: center;
        }
    }
    .el-checkbox-group {
        display: flex;
    }
    ::v-deep.el-checkbox {
        display: flex;
        align-items: center;
    }
}
</style>
